<template>
	<view class="container">



		<view class="pl">
			<view style="display: flex;align-items: center;">


				<!-- <view class="pl-title">我的视频</view> -->
				<u-tag text="我的视频" plain  :color="titindex==1?'':'#333333'" @click="settitindex(1)"  :borderColor="titindex==1?'#3c9cff':'#F6F7F8'"></u-tag>
				<!-- <view class="pl-title" style="margin-left: 20rpx;" ></view> -->
				<!-- <u-button type="primary" size="mini" :plain="true" text="" ></u-button> -->
				<u-tag text="我的订单" plain    :color="titindex==2?'':'#333333'"  @click="settitindex(2)"  style="margin-left: 30rpx;"  :borderColor="titindex==2?'#3c9cff':'#F6F7F8'"></u-tag>
			</view>

			<block v-if="titindex==1">
				<view class="pl-r" v-if="!isAll" @click="isAll = !isAll; selectKey = []">
					<image :src="ossUrl + `/static/9.png`" mode=""></image>
					批量操作
				</view>
				<view style="display: flex;align-items: center;" v-else>
					<view class="pl-all" @click="setAll">
						全选
					</view>
					<view class="pl-all back" @click="isAll = !isAll; selectKey = []">
						返回
					</view>
				</view>
			</block>
		</view>
		<view class="upload" @click="toAdd" v-if="titindex==1">
			<image :src="ossUrl + `/static/8.png`" mode=""></image>
			<text>发视频</text>
		</view>


		<block v-if="titindex==1">
			<view class="help" @click="toDetail()">
				<view class="list-l">
					<image :src="ossUrl + `/static/13.png`" mode="" class="icon"></image>
				</view>
				<view class="list-c">知识付费视频分享制作要求</view>
			</view>
			<view class="tx">温馨提示：你不经意的小知识，可能就是别人的信息壁垒，何不把他分享变现呢。需要知识分享教程，请查看用户宝典或联系客服。</view>
			<view class="courses" v-if="!isAll">
				<view class="course" v-for="it in list" :key="it.id">
					<view class="course-item" @click="toPage(it)">
						<image :src="it.img" mode="aspectFill" class="course-img"></image>
						<view class="course-info">
							<view class="course-title">
								<text class="course-title-tx">{{ it.title }}</text>
								<text v-if="it.recommend === 1" class="recommended">推荐</text>

								<text class="shtxt" style="color: #FF6E1F;"
									v-if="it.status === 2">{{it.state==2?'未上架':'待审核'}}</text>
								<text class="shtxt" style="color: #12B475;" v-if="it.status === 1">已审核</text>

							</view>

							<view class="course-category">分类：{{ it.classification }} 共{{it.video_number}}集</view>
							<view class="course-price">￥{{ it.price }}</view>
						</view>
					</view>
					<view class="course-actions">
						<view class="course-actions-l">{{ it.state === 1 ? '已上架' : '已下架'  }}</view>
						<view class="course-actions-r">
							<view class="action-btn-s" @click="toggle(6,[it.id])" v-if="it.recommend != 1">
								设为推荐
							</view>
							<view class="action-btn-s" @click="toggle(7,[it.id])" v-else>
								取消推荐
							</view>
							<view class="action-btn-s" @click="toggle(5,[it.id])" v-if="it.state === 2">
								<image :src="ossUrl + `/static/11.png`" mode=""></image>
								上架
							</view>
							<view class="action-btn" @click="toggle(1,[it.id])" v-if="it.state === 1">
								<image :src="ossUrl + `/static/10.png`" mode=""></image>
								下架
							</view>
							<view class="action-btn-edit" @click="edit(it)">
								<image :src="ossUrl + `/static/12.png`" mode=""></image>
								修改
							</view>
						</view>
					</view>
					<view class="reject" v-if="it.status === 3">
						<text>审核失败：</text>{{it.remark}}
					</view>
				</view>
			</view>
			<!-- 全选 -->
			<view class="list" v-else>
				<view class="list-item" v-for="it in list" @click="setSelectKey(it.id)">
					<view class="list_item">
						<image class="list_item-img" :src="it.img" mode="aspectFill"></image>
						<view class="list_item-content">
							<view class="list_item-content-h">
								{{ it.title }}
							</view>
							<view class="list_item-content-subTitle">
								分类：{{ it.classification }}
							</view>
							<view class="list_item-content-address">￥{{it.price}}</view>
						</view>
						<view class="list_item-rig">
							<image :src="ossUrl + `/static/${selectKey.includes(it.id)? '4' : '1'}.png`" mode="">
							</image>
						</view>
					</view>
				</view>
			</view>
			<u-gap :height="65"></u-gap>
			<view class="qx" v-if="isAll">
				<view class="qx-item" @click="toggleVailed(1,selectKey)">批量下架</view>
				<view class="qx-line"></view>
				<view class="qx-item" @click="toggleVailed(2,selectKey)">批量删除</view>
				<view class="qx-line"></view>
				<view class="qx-item" @click="toggleVailed(3,selectKey)">批量修改价格</view>
				<view class="qx-line"></view>
				<view class="qx-item" @click="toggleVailed(4,selectKey)">批量修改简介</view>
			</view>
		</block>
        <block v-if="titindex==2">
			<myorder ref="myorder"></myorder>
		</block>




		<Popup ref="popupRef" @submit="submitPopup" />
	</view>
</template>

<script>
	import Popup from './components/popup/popup.vue'
	import myorder from "./components/myoder.vue"
	import {
		InformationCourseManagement,
		InformationBulkOperation
	} from '@/common/http/api.js'
	export default {
		components: {
			Popup,myorder
		},
		data() {
			return {
				titindex: 1,
				//分页
				params: {
					page: 1,
					circle_id: undefined
				},
				isList: true,
				list: [],
				isAll: false,
				selectKey: []
			};
		},
		// onShow() {
		// 	this.reload()
		// },
		// created() {
		// 	this.reload()
		// },
		created() {
			let e=uni.getStorageSync('rztitindex')
			if(e==2){
				this.settitindex(e)
			}

		},
		methods: {
			settitindex(e){
				this.titindex=e
				uni.setStorageSync('rztitindex',e)
				if(this.titindex==1){
					this.reload()
				}
			},
			
			onBottom() {
				if(this.titindex==1){
					if (this.isList) {
						this.params.page++
						this.init()
					}
				}else{
					this.$refs.myorder.onBottom()
				}
	
			},
			toPage(it) {
				if(it.state!=1){
					uni.showToast({
						title:"请上架该产品",
						icon:"none"
					})
					return
				}
				if(it.status!=1){
					uni.showToast({
						title:"产品未审核",
						icon:"none"
					})
					return
				}
				uni.navigateTo({
					url: '/pagesB/teachingCourses/teachingCourses?id=' + it.id
				})
			},

			submitPopup(type, it) {
				this.toggle(type, it)
			},
			open(type, it) {
				this.$refs.popupRef.show(type, it, this.list.filter(i => this.selectKey.includes(i.id)), this.selectKey)
			},
			setAll() {
				if (this.selectKey.length === this.list.length) {
					this.selectKey = []
				} else {
					this.selectKey = this.list.map(i => i.id)
				}
			},
			setSelectKey(id) {
				if (!this.selectKey.includes(id)) {
					this.selectKey.push(id)
				} else {
					this.selectKey = this.selectKey.filter(i => i != id)
				}
			},
			reload(circle_id) {

				if (circle_id) {
					this.params.circle_id = circle_id
				}
				this.params.page = 1
				this.list = []
				this.init()
			},
			init() {
				
				
				if(!this.params.circle_id){
					return
				}
				uni.showLoading()
				InformationCourseManagement(this.params).then(res => {
					uni.hideLoading()
					if (Array.isArray(res.data.course) && res.data.course.length > 0) {
						if (this.params.page === 1) {
							this.list = res.data.course


						} else {
							this.list = this.list.concat(res.data.course)
						}
					} else {
						this.isList = false
					}


				})
			},
			toggleVailed(type, it) {
				if (it.length === 0) {
					uni.showToast({
						duration: 3000,
						title: '请选择视频！',
						icon: 'none'
					})
					return
				}
				if (type === 3 || type === 4) {
					this.open(type, it)
				} else {
					this.toggle(type, it)
				}

			},
			toggle(type, it) {
				//1下架 2删除 3修改价格 4简介 5上架 6设为推荐 7取消推荐
				let data = {}
				switch (type) {
					case 1:
						data = {
							type,
							id: it.join(',')
						}
						break;
					case 2:
						data = {
							type,
							id: it.join(',')
						}
						break;
					case 3:
						data = it
						break;
					case 4:
						data = it
						break;
					case 5:
						data = {
							type,
							id: it.join(',')
						}
						break;
					case 6:
						data = {
							type,
							id: it.join(',')
						}
						break;
					case 7:
						data = {
							type,
							id: it.join(',')
						}
						break;
					default:
						break;
				}

				uni.showLoading()
				InformationBulkOperation(data).then(res => {
					uni.hideLoading()
					this.isAll = false
					this.$store.commit('setIsRefresh', true)
					this.reload()
				})
			},
			edit(it) {
				// Implement edit logic
				uni.navigateTo({
					url: '/pagesA/managementCourses/add?id=' + it.id + '&circle_id=' + this.params.circle_id
				})
			},
			toAdd() {
				uni.navigateTo({
					url: '/pagesA/managementCourses/add?circle_id=' + this.params.circle_id
				})
			},
			toDetail() {
				uni.navigateTo({
					url: '/pagesA/aboutUs/aboutUs?id=11'
				})
			}
		},
	};
</script>

<style lang="scss" scoped>
	page {
		background: #F6F7F8;
	}

	.container {
		padding: 30rpx;
		box-sizing: border-box;
	}

	.header {
		height: 175rpx;
		background: #12B475;
		border-radius: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		margin-bottom: 25rpx;
		display: flex;
		align-items: center;

		.header-l {
			min-width: 0;
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;

			&>view {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
			}

			&>view {
				position: relative;

				view {
					font-family: PingFang SC;
					font-weight: 300;
					font-size: 26rpx;
					color: #FFFFFF;

					.status {
						font-family: PingFang SC;
						font-weight: 300;
						font-size: 22rpx;
						color: #FFFC00;
						margin-left: 20rpx;
					}
				}

				view:first-child {
					margin-bottom: 39rpx;
				}

				view:last-child {
					font-size: 40rpx;
				}

				.amount {
					font-family: PingFang SC;
					font-weight: 600;
					font-size: 40rpx;
					color: #FFFFFF;
				}
			}

			.income::after {
				content: "";
				width: 1rpx;
				height: 56rpx;
				background: #FFFFFF;
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
			}

			// .balance {
			// 	text {
			// 		font-family: PingFang SC;
			// 		font-weight: 300;
			// 		font-size: 26rpx;
			// 		color: #FFFFFF;

			// 	}
			// 	text:first-child{
			// 		margin-bottom: 39rpx;
			// 	}
			// 	.amount {
			// 		font-family: PingFang SC;
			// 		font-weight: 600;
			// 		font-size: 22rpx;
			// 		color: #FFFFFF;
			// 	}
			// }
		}

		.header-r {
			.withdraw {
				width: 140rpx;
				height: 54rpx;
				background: #FFFFFF;
				border-radius: 54rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #12B475;
				margin-bottom: 20rpx;
			}

			.record {
				width: 140rpx;
				height: 54rpx;
				border: 1px solid #FFFFFF;
				border-radius: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
	}

	.status {
		color: yellow;
	}



	.upload {
		box-sizing: border-box;
		width: 690rpx;
		height: 125rpx;

		box-shadow: 0rpx 5rpx 5rpx 0rpx rgba(187, 187, 187, 0.1);
		border-radius: 20rpx;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background: #FFFFFF;
		padding: 20rpx;
		margin-bottom: 40rpx;
		font-family: PingFang SC;
		font-weight: 300;
		font-size: 26rpx;
		color: #12B475;

		image {
			width: 34rpx;
			height: 34rpx;
			margin-bottom: 18rpx;
		}

	}

	.pl {
		width: 690rpx;
		margin: 0 auto 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.pl-title {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #131313;
			margin-right: 30rpx;
		}

		.pl-r {
			display: flex;
			align-items: center;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 14rpx;
			}

			font-family: PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #131313;
		}

		.pl-all {
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #12B475;
		}
	}

	.courses {

		width: 690rpx;
		margin: 0 auto;
	}

	.course {
		width: 100%;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-bottom: 20rpx;

		.course-item {
			box-sizing: border-box;
			padding: 20rpx;
			display: flex;
			border-bottom: 1rpx solid #EEEEEE;
		}
	}

	.course-img {
		width: 240rpx;
		height: 140rpx;
		border-radius: 10rpx;
		margin-right: 26rpx;
	}

	.course-info {
		flex: 1;
	}

	.course-title {
		display: flex;
		// align-items: center;
		justify-content: space-between;

		margin-bottom: 40rpx;

		.course-title-tx {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #131313;
			flex: 1;
		}

		.shtxt {
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			margin-left: 10rpx;

		}
	}

	.recommended {
		width: 60rpx;
		height: 31rpx;
		border-radius: 10rpx;
		border: 1px solid #FFC410;
		display: flex;
		align-items: center;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 20rpx;
		color: #FFC410;
		margin-left: 17rpx;
		justify-content: center;
	}

	.course-category {
		font-family: PingFang SC;
		font-weight: 300;
		font-size: 24rpx;
		color: #666666;
		margin-bottom: 18rpx;
	}

	.course-price {
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #F71515;
		text-align: right;
	}

	.course-actions {
		width: 100%;
		height: 95rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 30rpx;
	}

	.reject {
		padding: 24rpx 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #F71515;

		text {
			font-family: PingFang SC;
			font-weight: 300;
			font-size: 24rpx;
			color: #666666;
		}
	}

	.course-actions-l {
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
	}

	.course-actions-r {
		display: flex;
		align-content: center;

		&>view {
			margin-left: 20rpx;
		}
	}

	.action-btn {
		width: 141rpx;
		height: 57rpx;
		border-radius: 28rpx;
		border: 1px solid #4A78E1;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #4A78E1;

		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 12rpx;
		}
	}

	.action-btn-edit {
		width: 141rpx;
		height: 57rpx;
		border-radius: 28rpx;
		border: 1px solid #8A8A8A;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #666666;

		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 12rpx;
		}
	}

	.action-btn-s {
		width: 141rpx;
		height: 57rpx;
		border-radius: 28rpx;
		border: 1px solid #FF6E1F;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #FF6E1F;

		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 12rpx;
		}
	}

	.list {
		width: 690rpx;
		margin: 0 auto;

		.list-item {
			width: 100%;
			margin-bottom: 20rpx;
			background: #FFFFFF;

			.list_item {
				box-sizing: border-box;
				padding: 25rpx;
				display: flex;
				align-items: center;

				.list_item-img {
					width: 200rpx;
					height: 142rpx;
					margin-right: 32rpx;
				}

				.list_item-content {
					width: 300rpx;

					.list_item-content-h {

						margin-bottom: 32rpx;
						font-family: PingFang;
						font-weight: 800;
						font-size: 28rpx;
						color: #131313;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.list_item-content-subTitle {
						font-family: PingFang;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						display: flex;
						align-items: center;
						margin-bottom: 27rpx;


					}

					.list_item-content-address {
						min-width: 0;
						font-weight: 400;
						font-size: 32rpx;
						color: #F71515;

						//height: 23rpx;
					}
				}

				.list_item-rig {
					flex: 1;
					min-width: 0;
					display: flex;
					align-items: center;
					justify-content: flex-end;

					image {
						width: 34rpx;
						height: 34rpx;
					}
				}
			}
		}
	}

	.qx {
		width: 100%;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 99;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background: #12B475;

		.qx-item {
			height: 100%;
			font-size: 26rpx;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
		}

		.qx-line {
			width: 1rpx;
			height: 40rpx;
			background: white;
		}
	}

	.back {
		color: #131313 !important;
		margin-left: 20rpx;
	}

	.help {
		width: 690rpx;
		margin: 0 auto;
		margin-bottom: 10rpx;
		padding: 0rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;

		.list-l {
			width: 42rpx;
			height: 100%;
			display: flex;
			align-items: center;
		}

		.icon {
			width: 42rpx;
			height: 42rpx;
		}

		.list-c {
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #131313;
			padding-left: 28rpx;
			padding-right: 68rpx;
			flex: 1;
			min-width: 0;
		}

		.rig {
			width: 30rpx;
			height: 30rpx;
		}
	}

	.tx {
		font-size: 26rpx;
		color: #999999;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
</style>